<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>请登录</title>
        <style>
            #login_wrapper {
                margin: auto;
                border: 1px solid #b8daff;
                padding: 20px;
                width: 500px;
                box-shadow: 5px 5px 5px beige;
            }
            label {
                display: inline-block;
                height: 50px;
                width: 70px;
                color: red;
            }
            .btn {
                margin-left: 70px;
                width: 200px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        {% block content %}
            <div id="login_wrapper">
                <p>请登陆系统</p>
                <form method="post" action="{{ url_for('login_X') }}">
                    <label for="username">用户名:</label>
                    <input id="username" type="text" name="username" required>
                    <br>
                    <label  for="password">密码:</label>
                    <!-- 密码输入框的 type 属性使用 password，会将输入值显示为圆点 -->
                    <input id="password" type="password" name="password" required>
                    <br>
                    <input class="btn" type="button" name="submit" value="登陆" onclick="login()">
                </form>
            </div>

        {% endblock %}
    </body>
    <script>
        async function login() {
            const form = document.querySelector("form");
            if (!(form["username"] && form["password"])) {
                alert("用户名和密码不正确！");
                return;
            }
            const url = window.location.origin + "/login_X";
            console.log(url);
            try {
                let response = await fetch(url,{
                   method: 'POST',
                   body: new FormData(form)
                });

                if (response.ok) {
                    let strx = await response.text();
                    // console.log(strx);
                    if (strx.substring(strx.length-4,strx.length)==="[OK]") {
                        window.alert(strx.substring(0, strx.length - 4) + " 登录成功！");
                        window.location.replace(window.location.origin);
                    } else {
                        window.alert(strx);
                        return;
                    }

                }
            } catch (error) {
                window.alert("登陆出现问题，请联系管理员。");
            }

        }
    </script>
</html>